<template>
    <div class="typepage">
        <div class="header">
            <img src="../../assets/LOGOS.png" alt="">
        </div>
        <div class="title">
            <span>铂诺智能云策略平台</span>
            <p>多维度筛选动向  大数据发掘牛股</p>
        </div>
        <div class="centerIMg">
            <img class="person" @click="GoLogin" src="../../assets/首页阿诺.png" alt="">
            <img class="kWrie" src="../../assets/首页k线.png" alt="">

        </div>
        <div class="number">

            <img class="animationOne" src="../../assets/首页数字1.png" alt="">
            <img class="animationTwo"  src="../../assets/首页数字2.png" alt="">
            <img class="animationThree" src="../../assets/首页数字3.png" alt="">
            <img class="animationFour" src="../../assets/首页数字4.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    methods:  {
        GoLogin(){
            this.$router.push('/login')
        }
    }
}
</script>

<style lang='less'>
body{
    // overflow: hidden;
.typepage{
    width: 80%;
    height: 945px;;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
    .header{
        // padding-top: 1%;
        // height: 5%;  
        // height: 60px;
        // margin-: 5px;
        height: 50px;
        padding-top: 10px;
        line-height: 60px;
    }
    .title{
        text-align: center;
        margin-top: 210px;
        span{
            font-family: PingFangSC-Semibold;
            font-size: 72px;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: justify;
        }
        p{
            display: block;
            margin-top: 2%;
            font-family: PingFangSC-Regular;
            font-size: 30px;
            color: #1AC5DC;
            letter-spacing: 0;
            margin-bottom:45px;
            // text-align: justify;
        }
    }
    .centerIMg{
        // magin-top: 10%;
        // margin-top: 10%;
        height:473px;
        width: 80%;
        margin: 0 auto;
        background: url(../../assets/首页光效.png) no-repeat center center;
        background-size: 100% 100%;
        position: relative;
        .person{
            // float: left;
            position: absolute;
            width: 16%;
            margin: 0 auto;
            top: 0%;
             left: 42%;
             z-index: 1;
            transform: translate(0%,0%);
        }
        .kWrie{
            position: absolute;
            width: 45%;
            top: 44%;
            left: 28%;
            transform: translate(0%,0%);
        }
        
    }
    .number{
        position: relative;
        top:0%;
        transform: translate(44%, -100%);
        .animationOne{
            // transform: translate(0%, 0%);
            animation:animationOne 5s 1.5s infinite;
            -webkit-animation:animationOne 5s infinite;
        }
        @keyframes animationOne
        {
            0% {transform: translate(0%, 0%);}
            
            100% {transform: translate(-500%, -400%);}
        }
        .animationTwo{
            animation:animationTwo 6s ease;
            -webkit-animation:animationTwo 5s ease 1s infinite ;
        }
        @keyframes animationTwo
        {
            0% {transform: translate(0%, 0%);}
            100% {transform: translate(-304%, -400%);}
        }
        .animationThree{
            animation:animationThree 3s infinite;
            -webkit-animation:animationThree 5s infinite;
        }
        @keyframes animationThree
        {
            0% {transform: translate(0%, 0%);}
            100% {transform: translate(300%, -500%);}
        }
        .animationFour{
            animation:animationFour 4s infinite;
            opacity: 0.1;
            -webkit-animation:animationFour 5s 2s infinite;
        }
        @keyframes animationFour
        {
            0% {transform: translate(100%, -50%);opacity: 0.5;}
            20% {display: block;}
            100% {transform: translate(400%, -200%);opacity: 1;}
        }
    }

}
}

</style>
